﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MapViewChoose.aspx.cs" Inherits="View_MapViewChoose" %>


<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map-canvas {
            height: 100%;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    <script src="../Scripts/jquery-1.8.2.js"></script>
    <script type="text/javascript">
        var map;
        var infowindow = new google.maps.InfoWindow();
        var infowindowTemp = new google.maps.InfoWindow();
        var geocoder;
        var temp;
        var busCircle;
        $(document).ready(function () {
            $.ajax({
                type: "POST",
                url: "MapViewChoose.aspx/getBusStationNewest",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    var busStation = data.d;
                    var name = busStation.StaionName;
                    var lat = busStation.Latitude;
                    var lon = busStation.Longitude;
                    requestData(name,lat,lon);
                },
                failure: function (data) {
                    console.log(data.d);
                },
                error: function (data) {
                    console.log(data.d);
                }
            });
        });

        function choicePointAndCloseMap(lat, lon) {
            window.opener.refresh_data(temp.split(',').join('-'), lat, lon);
            this.close();
        }

        function initialize() {
            geocoder = new google.maps.Geocoder();
            var pyrmont = new google.maps.LatLng(21.00792, 105.844688);

            var mapOptions = {
                center: new google.maps.LatLng(21.00792, 105.844688),
                zoom: 12,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: true,
                mapTypeControlOptions:
                {
                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                    poistion: google.maps.ControlPosition.TOP_RIGHT,
                    mapTypeIds: [google.maps.MapTypeId.ROADMAP,
                      google.maps.MapTypeId.TERRAIN,
                      google.maps.MapTypeId.HYBRID,
                      google.maps.MapTypeId.SATELLITE]
                },
                navigationControl: true,
                navigationControlOptions:
                {
                    style: google.maps.NavigationControlStyle.ZOOM_PAN
                },
                scaleControl: true,
                disableDoubleClickZoom: true,
                draggable: true,
                streetViewControl: true,
                draggableCursor: 'crosshair'
            };
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        }

        function requestData(name,lat, lon) {
            var latlng = new google.maps.LatLng(lat, lon);
            map.setCenter(latlng);
            map.setZoom(16);
            marker = new google.maps.Marker({
                position: latlng,
                map: map
            });
            infowindowTemp.setContent(name);
            infowindowTemp.open(map,marker);
            var request = {
                location: latlng,
                radius: 600,
                types: ['bus_station']
            };
            drawCicle(lat,lon);
            var service = new google.maps.places.PlacesService(map);
            service.nearbySearch(request, callback);
        }

        function callback(results, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                for (var i = 0; i < results.length; i++) {
                    createMarker(results[i]);
                }
            }
        }

        function createMarker(place) {
            var placeLoc = place.geometry.location;
            var marker = new google.maps.Marker({
                map: map,
                position: place.geometry.location
            });

            google.maps.event.addListener(marker, 'click', function () {
                temp = place.name;
                var link = "<a " + "onclick=choicePointAndCloseMap(" + place.geometry.location.nb + "," + place.geometry.location.ob + ")" + " href='javascript:;'>" + temp + "</a>";
                var htmlResult = "<p>" + link + "</p>";
                infowindow.setContent(htmlResult);
                infowindow.open(map, this);
            });
        }

        function drawCicle(lat, lon) {
            var latlng = new google.maps.LatLng(lat, lon);
            var populationOptions = {
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35,
                map: map,
                center: latlng,
                radius: 600
            };
            busCircle = new google.maps.Circle(populationOptions);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div id="map-canvas" />
</body>
</html>

